<template>
  <div style="margin:20px;">
    <el-table border :data="list">
       <el-table-column label="姓名">

         <template slot-scope="scope">
              <template v-if="scope.row.edit">
                   <el-input v-model="scope.row.author" class="edit-input" size="small"/>
              </template>
              <span v-else>{{scope.row.author}}</span>
         </template>
       </el-table-column>
       
        <el-table-column label="标题">
          <template slot-scope="scope">
              <template v-if="scope.row.edit">
                   <el-input v-model="scope.row.title" class="edit-input" size="small"/>
              </template>
              <span v-else>{{scope.row.title}}</span>
           
          </template>
       </el-table-column>

       
   
       <el-table-column label="操作" align="center">
           <template slot-scope="scope">
              <el-button v-if="scope.row.edit" class="cancel-btn" size="mini" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">取消</el-button>
              <el-button v-if="scope.row.edit" type="success" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">确定</el-button>
              <el-button v-else type="primary" size="mini" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit">修改</el-button> <!-- 修改状态不等于edit -->
          </template>
       </el-table-column>
    </el-table>
  </div>
</template>


<script>
import { fetchList} from '@/api/article'
export default {
  name:'tableInlineEdit',
  data(){
    return{
      list:[],
      listQuery: {
        page: 1,
        limit: 5,      
      },
    }
  },
  created(){
     this.getList()
  },
  methods:{
    /*初始化列表 */
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
      const items=response.data.items
         /* 遍历数组 */
         this.list=items.map(ele=>{
           this.$set(ele,'edit',false) /* 给数组对每个对象添加编辑状态初始值为false */
          ele.ogrinTitle=ele.title //定义个新的标题名称等于标题
          ele.orginAuthor=ele.author //起个新的名字存原来的作者
          return ele
         })
         this.listLoading = false
      })
      .catch(err=>{
        console.log(err)
      })
    },
    /* 确定按钮 */
    confirmEdit(row){
      row.edit=false
      row.ogrinTitle=row.title // 修改后新的标题也跟着改变
      row.orginAuthor=row.author
      this.$message({
      type:'success',
      message:'修改成功'
    })
    },
   /* 取消按钮 */
   cancelEdit(row){
     row.edit=false
     row.title=row.ogrinTitle // 取消后标题还是等于原来的标题不变
     row.author=row.orginAuthor
    this.$message({
      type:'success',
      message:'取消成功'
    })
   }
  }
}
</script>
